<template>
  <div>
    {{num}}
    {{name}}
    {{arr}}
    {{obj}}
    {{obj.age}}
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'DefData', // 组件名称
  // 注意：vue3.0中，没有this
  setup (props, ctx) {
    let num = ref(10)
    let name = ref('Jack')
    let arr = ref(['a', 'b', 'c', 'd'])
    let obj = ref({
      username: 'Zhang',
      age: 20
    })
    // 注意：定义好的变量、方法一定要返回出去
    return {
      num,
      name,
      arr,
      obj
    }
  }
})
</script>

<style lang="scss" scoped>
</style>